<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        li {
            list-style: none;
        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <div id="ull">
        <ul>
            <li v-for="item in arr" :key="item.id">
             
                {{item.name}}
                <img v-bind:src="item.url" alt="" >
                {{item.price * item.num}}
                <button @click="jian(item)">-</button>
                <span>{{item.num}}</span>
                <button @click="jia(item)">+</button>
                <button @click="del(item.id)">删除</button>
            </li>

         
    </div>
    <script>
        new Vue({
            el: '#ull',
            data: {
                arr: [{
                    id: 1,
                    name: '华为mate xt',
                    price: 4599,
                    url: "https://2f.zol-img.com.cn/product/269_800x600/145/ceFDUcTj2jc4U.jpg",
                    num: 1,
                    is: false
                }, {
                    id: 2,
                    name: '小米15',
                    price: 4599,
                    url: "https://2d.zol-img.com.cn/product/270_320x240/849/ce84ZrOzhggic.png",
                    num: 1,
                    is: false
                }, {
                    id: 3,
                    name: '华为p70',
                    url: "https://img1.mydrivers.com/img/20240403/6def44b76e1a47a6a998aa32a3ccde5a.jpg",
                    price: 4599,
                    num: 1,
                    is: false
                }, {
                    id: 4,
                    name: '苹果16pro',
                    url: "https://doc-fd.zol-img.com.cn/t_s2000x2000/g7/M00/0D/0E/ChMkK2bg8S-IVVTAAACfIyofyegAAi3_wOnuOQAAJ87032.jpg",
                    price: 4599,
                    num: 1,
                    is: false,
      
                },],
          
            },
            methods: {
                 del(id){
                   var a=this.arr.findIndex(item=>item.id==id)
                   this.arr.splice(a,1)
                 },
                 jia(i){
                        i.num++
                 },
                 jian(i){
                      if(i.num>1){
                       i.num--
                    }
                 },
                  

            },
            momputed: {
   
            },
            filters: {

            }
        })  
    </script>
</body>

</html>